<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、热门地点排行 </div>
<div style=" text-indent: 2em; font-size: 20px; margin-top: 20px; line-height: 35px; " > 截至当前，本省热门地点排行TOP10如下所示： </div>
<div id="myecharts" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {
        $(document).ready(function () {
            // 热门地点排行
            /*var areaData = [
                { area: "海口", count: 6 },
                { area: "白沙", count: 565 },
                { area: "陵水", count: 44 },
                { area: "三亚", count: 221 },
                { area: "琼海", count: 41 },
                { area: "文昌", count: 400 },
                { area: "万宁", count: 144 },
                { area: "东方", count: 94 },
                { area: "儋州", count: 664 },
            ];*/
            var areaData = ${areaRankList}
            var hainanMapBar = echarts.init(document.getElementById("myecharts"));
            var barYAxisData = $.map(areaData, function(n, i){ return n.county  })
            var barValues = $.map(areaData, function(n, i){ return n.count })
            var optionBar = {
                title: {
                    text: "热门地点排行",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ['#4b91ff'],
                legend: false,
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                },
                yAxis: {
                    type: "category",
                    data: barYAxisData,
                },
                series: [
                    {
                        type: "bar",
                        data: barValues,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: (params) => {
                                    console.log(params.value)
                                    let result = ''
                                    result = params.value / 10000
                                    if (params.value > 10000) {
                                        return result + '万'
                                    } else {
                                        return params.value
                                    }
                                },
                                textStyle: {
                                    color: '#4a4b4b',
                                },
                            },
                        },
                    }
                ]
            }
            hainanMapBar.setOption(optionBar);
        })
    })()
</script>